<template>
  <view>
    <Tabs :tabs="tabs" @myEven="handleTabsItemChange">
      <view class="collect_main">
        <view class="collect_title">
          <text class="collect_tips active">全部</text>
          <text class="collect_tips">正在热卖</text>
          <text class="collect_tips">即将上线</text>
        </view>
        <view class="collect_content">
          <navigator class="goods_item" v-for="item in collect" :key="item.goods_id"
            :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`">
            <!-- 左侧 图片容器 -->
            <view class="goods_img_wrap">
              <image mode="widthFix"
                :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'">
              </image>
            </view>
            <!-- 右侧 商品容器 -->
            <view class="goods_info_wrap">
              <view class="goods_name">{{item.goods_name}}</view>
              <view class="goods_price">￥{{item.goods_price}}</view>
            </view>
          </navigator>
        </view>
      </view>

    </Tabs>
  </view>
</template>

<script>
import Tabs from "../../components/Tabs/Tabs.vue";
export default {
  components: {
    Tabs,
  },
  data() {
    return {
      tabs: [
        {
          id: 0,
          value: "商品收藏",
          isActive: true,
        },
        {
          id: 1,
          value: "品牌收藏",
          isActive: false,
        },
        {
          id: 2,
          value: "店铺收藏",
          isActive: false,
        },
        {
          id: 3,
          value: "浏览器足迹",
          isActive: false,
        },
      ],
      collect: [],
    };
  },
  onShow() {
    const collect = uni.getStorageSync("collect") || [];
    this.collect = collect;
  },
  methods: {
    handleTabsItemChange(e) {
      // 1 获取被点击的标题索引
      const index = e;
      console.log(e, "index");
      // 2 修改源数组
      let tabs = this.tabs;
      tabs.forEach((v, i) => {
        return i === index ? (v.isActive = true) : (v.isActive = false);
      });
      // 3 赋值到data中
      this.tabs = tabs;
    },
  },
};
</script>

<style lang="less">
.collect_main {
  background-color: #f3f4f6;
  .collect_title {
    padding: 40rpx 0;
    .collect_tips {
      padding: 15rpx;
      border: 1rpx solid #ccc;
      margin-left: 25rpx;
      background-color: #fff;
    }
    .active {
      color: var(--themeColor);
      border-color: currentColor;
    }
  }
  .collect_content {
    .goods_item {
      display: flex;
      border-bottom: 1px solid #ccc;
      background-color: #fff;
      .goods_img_wrap {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
          width: 70%;
        }
      }
      .goods_info_wrap {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .goods_price {
          color: var(--themeColor);
          font-size: 32rpx;
        }
      }
    }
  }
}
</style>
